<template>
  <div>
    <el-form ref="ruleForm" :model="ruleForm" label-width="180px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="首次发病时间" prop="firstMorbidityTime">
            <el-date-picker
              v-model="ruleForm.firstMorbidityTime"
              type="date"
              placeholder="选择日期"
              value-format="yyyy-MM-dd"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="首次发病年龄（岁）" prop="morbidityAge">
            <el-input v-model="morbidityAge" class="input" disabled />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="病程（月）" prop="progress">
            <el-input v-model="ruleForm.progress" class="input" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="确诊时间" prop="confirmedTime">
            <el-date-picker
              v-model="ruleForm.confirmedTime"
              type="date"
              placeholder="选择日期"
              value-format="yyyy-MM-dd"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="发病与确诊时间间隔（天）" prop="tInterval">
            <el-input v-model="tInterval" class="input" disabled />
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="首发症状:">
        <el-checkbox-group v-model="ruleForm.initialSymptom" @change="handleChecked">
          <el-checkbox label="眼外肌无力" name="initialSymptom" />
          <el-checkbox label="面肌无力" name="initialSymptom" />
          <el-checkbox label="球部症状" name="initialSymptom" />
          <el-checkbox label="肢体无力-疲劳" name="initialSymptom" />
          <el-checkbox label="颈肌无力" name="initialSymptom" />
          <el-checkbox label="呼吸肌无力" name="initialSymptom" />
          <el-checkbox label="咀嚼肌无力" name="initialSymptom" />
          <el-checkbox label="植物神经受累" name="initialSymptom" />
        </el-checkbox-group>
      </el-form-item>
      <el-form-item v-show="symptomIndex.indexOf('眼外肌无力') !== -1" label="眼外肌无力">
        <el-checkbox-group v-model="ruleForm.ignition">
          <el-checkbox label="单眼睑下垂" name="ignition" />
          <el-checkbox label="双眼睑下垂" name="ignition" />
          <el-checkbox label="复视" name="ignition" />
          <el-checkbox label="斜视" name="ignition" />
          <el-checkbox label="视物模糊" name="ignition" />
          <el-checkbox label="眼睑不能闭合" name="ignition" />
        </el-checkbox-group>
      </el-form-item>
      <el-form-item v-show="symptomIndex.indexOf('球部症状') !== -1" label="球部症状">
        <el-checkbox-group v-model="ruleForm.sphericalSymptom">
          <el-checkbox label="吞咽困难" name="sphericalSymptom" />
          <el-checkbox label="饮水呛咳" name="sphericalSymptom" />
          <el-checkbox label="说话鼻音" name="sphericalSymptom" />
          <el-checkbox label="声音嘶哑" name="sphericalSymptom" />
          <el-checkbox label="构音不清" name="sphericalSymptom" />
        </el-checkbox-group>
      </el-form-item>
      <el-form-item v-show="symptomIndex.indexOf('肢体无力-疲劳') !== -1" label="肢体无力-疲劳">
        <el-checkbox-group v-model="ruleForm.fatigue">
          <el-checkbox label="单上肢" name="fatigue" />
          <el-checkbox label="单下肢" name="fatigue" />
          <el-checkbox label="双上肢" name="fatigue" />
          <el-checkbox label="双下肢" name="fatigue" />
          <el-checkbox label="四肢" name="fatigue" />
          <el-checkbox label="近端" name="fatigue" />
          <el-checkbox label="远端" name="fatigue" />
        </el-checkbox-group>
      </el-form-item>
      <el-form-item v-show="symptomIndex.indexOf('植物神经受累') !== -1" label="植物神经受累">
        <el-checkbox-group v-model="ruleForm.plantNeurogenic">
          <el-checkbox label="畏光" name="plantNeurogenic" />
          <el-checkbox label="尿便障碍" name="plantNeurogenic" />
          <el-checkbox label="出汗" name="plantNeurogenic" />
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="诱因" prop="reason">
        <el-radio-group v-model="ruleForm.reason" @change="handleRadio">
          <el-radio :label="1">无</el-radio>
          <el-radio :label="2">有</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item v-show="radioValue === 2" label="具体诱因">
        <el-checkbox-group v-model="ruleForm.specificCause">
          <el-checkbox label="过度劳累" name="specificCause" />
          <el-checkbox label="感冒受凉" name="specificCause" />
          <el-checkbox label="情绪波动" name="specificCause" />
          <el-checkbox label="不规律服药" name="specificCause" />
          <el-checkbox label="疫苗接种" name="specificCause" />
          <el-checkbox label="其他" name="specificCause" />
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="首发症状是否为最重">
        <el-radio-group v-model="ruleForm.isMostSymptoms" @change="handleRadio1">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="2">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item v-show="radioValue1 === 1" label="最重症状">
        <el-checkbox-group v-model="ruleForm.mostSymptoms">
          <el-checkbox label="眼外肌无力" name="mostSymptoms" />
          <el-checkbox label="面肌无力" name="mostSymptoms" />
          <el-checkbox label="球部症状" name="mostSymptoms" />
          <el-checkbox label="肢体无力-疲劳" name="mostSymptoms" />
          <el-checkbox label="颈肌无力" name="mostSymptoms" />
          <el-checkbox label="呼吸肌无力" name="mostSymptoms" />
          <el-checkbox label="咀嚼肌无力" name="mostSymptoms" />
          <el-checkbox label="植物神经受累" name="mostSymptoms" />
          <el-checkbox label="躯干无力" name="mostSymptoms" />
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="病情最重时间" prop="mostSymptomsTime">
        <el-date-picker
          v-model="ruleForm.mostSymptomsTime"
          type="date"
          placeholder="选择日期"
        />
      </el-form-item>
      <el-form-item label="最重时Osserman分型" prop="osserman">
        <el-radio-group v-model="ruleForm.osserman">
          <el-radio :label="1" title="病变仅限于眼外肌，出现上眼睑下垂和复视">I 型-眼肌型</el-radio>
          <el-radio :label="2" title="可累及眼、面、四肢肌肉，生活多可自理，无明显咽喉肌受累">II A型-轻度全身型</el-radio>
          <el-radio :label="3" title="四肢肌群受累明显，除伴有眼外肌麻痹外，还有明显的咽喉肌无力症状，如说话含糊不清、吞咽困难、饮水呛咳、咀嚼无力，但呼吸肌受累不明显">II B型-中度全身型</el-radio>
          <el-radio :label="4" title="急性起病，常在数周内累计延髓肌、肢带肌、躯干肌和呼吸肌，肌无力严重，有重症肌无力危象，需做气管切开，死亡率较高">III 型-急性重症型</el-radio>
          <el-radio :label="5" title="病程达2年以上，常由Ⅰ型、ⅡA型、ⅡB型发展而来，症状同Ⅲ型，常合并胸腺瘤，预后较差">IV 型-迟发重症型</el-radio>
          <el-radio :label="6" title="少数患者肌无力伴萎缩">V 型-肌萎缩型</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="最重时MGFA分型" prop="mgfa">
        <el-radio-group v-model="ruleForm.mgfa">
          <el-radio :label="1" title="任何眼肌无力、可伴有限闭合无力，其他肌群肌力正常">I 型</el-radio>
          <el-radio :label="2" title="无论眼肌无力的程度，其他肌群轻度无力。主要累及四肢肌或（和）躯干肌，可有同等程度以下的咽喉肌受累">II A型</el-radio>
          <el-radio :label="3" title="无论眼肌无力的程度，其他肌群轻度无力。主要累及咽喉肌或（和）呼吸肌，可有同等程度以下的四肢或（和）躯干肌受累">II B型</el-radio>
          <el-radio :label="4" title="无论眼肌无力的程度，其他肌群中度无力。主要累及四肢肌或（和）躯干肌，可有同等程度以下的咽喉肌受累">III A型</el-radio>
          <el-radio :label="5" title="无论眼肌无力的程度，其他肌群中度无力。主要累及咽喉肌或（和）呼吸肌，可有同等程度以下的四肢或（和）躯干肌受累">III B型</el-radio>
          <el-radio :label="6" title="无论眼肌无力的程度，其他肌群重度无力。主要累及四肢肌或（和）躯干肌，可有同等程度以下的咽喉肌受累">IV A型</el-radio>
          <el-radio :label="7" title="无论眼肌无力的程度，其他肌群重度无力。主要累及咽喉肌或（和）呼吸肌，可有同等程度以下的四肢或（和）躯干肌受累">IV B型</el-radio>
          <el-radio :label="8" title="气管插管，伴或不伴机械通气（除外术后常规使用）；无插管的鼻饲病例为ⅣB型">V 型</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
      </el-form-item>
    </el-form>
    <el-divider />
    <pre-cure-detail />
  </div>
</template>

<script>
import PreCureDetail from './preCureDetail.vue'
import { add } from '@/api/medicalHistory'
import { initData } from '@/api/data'
import { mapGetters } from 'vuex'

export default {
  components: {
    PreCureDetail
  },
  data() {
    return {
      ruleForm: {
        pid: this._routerRoot._route.query.id,
        initialSymptom: [],
        ignition: [],
        sphericalSymptom: [],
        fatigue: [],
        plantNeurogenic: [],
        mostSymptoms: [],
        osserman: 0,
        mgfa: 0,
        isMostSymptoms: 0,
        reason: 0,
        specificCause: [],
        firstMorbidityTime: '',
        confirmedTime: ''
      },
      query: {
        id: ''
      },
      symptomIndex: [],
      radioValue: 0,
      radioValue1: 0
    }
  },
  computed: {
    tInterval() {
      var begin = new Date(this.ruleForm.firstMorbidityTime)
      var end = new Date(this.ruleForm.confirmedTime)
      return Math.floor((end.getTime() - begin.getTime()) / (24 * 3600 * 1000))
    },
    ...mapGetters(
      [
        'birth'
      ]
    ),
    morbidityAge() {
      var begin = new Date(this.birth)
      var end = new Date(this.ruleForm.firstMorbidityTime)
      return Math.floor((end.getTime() - begin.getTime()) / (12 * 30 * 24 * 3600 * 1000))
    }
  },
  watch: {
    'ruleForm.confirmedTime': function(val, oldVal) {
    }
  },
  created() {
    this.query.id = this._routerRoot._route.query.id
    initData('api/medicalHistory/findByPid', this.query).then(data => {
      if (data === 'null') {
        return
      }
      this.ruleForm = data
    })
    this.symptomIndex = this.ruleForm.initialSymptom
    this.radioValue = this.ruleForm.reason
    this.radioValue1 = this.ruleForm.isMostSymptoms
  },
  methods: {
    submitForm(formName) {
      add(this.ruleForm).then(res => {
        alert('提交成功')
        console.log(res)
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    handleChecked(v) {
      this.symptomIndex = v
    },
    handleRadio(v) {
      this.radioValue = v
    },
    handleRadio1(v) {
      this.radioValue1 = v
    }
  }
}
</script>

<style>
.input {
  width: 220px;
}
</style>
